<template>
  <div>
    <div v-show="showAddComment" @click.self="closeAddComment" class="modal c-pf">
      <div class="modal-content c-w100">
        <div class="masker-content c-br-tl20 c-br-tr20 c-pf c-bg-white c-p-b0 c-w100 c-maxw640">
          <div class="c-w100 c-textAlign-c c-fs28 c-lh40 c-pt24 c-fc-xblack c-fw-b c-pb34">添加评论</div>
          <i class="iconfont c-pa c-p-t30 c-p-r24 c-fc-sgray c-fs20 c-bg-f6 c-ww30 c-hh30 c-brp50 c-flex-row c-flex-center" @click="closeAddComment">&#xe8fd;</i>
          <div class="c-ph24 c-bd-b1-f5 c-pb30">
            <p class="c-fs22 c-fc-gray c-text-ellipsis1 c-lh32 c-hh32" v-if="replyInfo">回复
              <span v-if="replyInfo.nickname">{{replyInfo.nickname}}</span>：
              <span v-if="replyInfo.content" v-html="replyInfo.content" class="c-text-ellipsis1">{{replyInfo.content}}</span>
            </p>
            <textarea ref="contentArea" autofocus="autofocus" class="c-ph12 c-pv12 c-w100 c-br8 c-bd0 c-fs22 c-lh32" rows="3" maxlength="1024" v-model="addComment.text"></textarea>
            <div class="c-flexw-wrap c-flex-row c-mt12">
              <!-- 图片 -->
              <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pt12 c-mb30" v-if="addComment.img && addComment.img.length > 0">
                <div class="c-ww120 c-hh120 c-inlineblack c-vcAlign-middle c-flex-row c-aligni-center c-p c-mr20" v-for="(item, index) in addComment.img" :key="index">
                  <i @click="delUploadImage(index)" class="del-img c-ww48 c-hh48 c-translucent-balck80 c-fc-white c-brp50 c-textAlign-c c-lh48 iconfont">&#xe8fd;</i>
                  <img @click="clickPreviewImage(item, addComment.img, index)" class="c-w100 c-h c-br8 c-object-fit-cover" :src="item" alt=""/>
                </div>
              </div>
              <!-- 音频 -->
              <div class="c-flex-row c-aligni-center c-w100 c-mb30" v-if="uploadAudioList.length > 0">
                <div :style="'width:' + (item.time * 1.5 + 150) + 'px;'" class="c-maxw440 c-flex-1 c-flex-row c-aligni-center c-justify-sb c-br30 c-pv6 c-pr20 c-pl6 theme-bg-10 theme-fc" v-for="(item, index) in uploadAudioList" :key="index" @click="clickPlayAudio(item.url)">
                  <!-- <img class="c-ww30 c-hh30 c-rotate180" v-if="playAduioSrc != item.url" :src="require('@/assets/i/wap/course/chat_right_play.png')" alt="" />
                  <img class="c-ww30 c-hh30 c-rotate180" v-else :src="require('@/assets/i/wap/course/chat_right_play.gif')" alt="" />
                  <div class="c-flex-row c-flex-center c-flex-1 c-fs24">点击播放</div> -->
                  <div class="c-bg-white c-ww48 c-hh48 c-br50 c-flex-row c-justify-center c-aligni-center">
                    <span class="iconfont c-fs22">{{playAduioSrc != item.url ? '&#xe6dd;':'&#xe6de;'}}</span>
                  </div>
                  <div v-if="playAduioSrc == item.url" class="audio-play-anim c-flex-row c-justify-center c-aligni-center">
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                  </div>
                  <span class="c-fs22 theme-fc">{{item.time}}"</span>
                </div>
                <i @click="clickDelAudio(index)" class="iconfont c-fs28 c-fc-sxblack c-pl20">&#xe6ec;</i>
              </div>
              <!-- 视频 -->
              <div class="c-mb30 c-w100" v-if="uploadVideoList.length > 0">
                <div class="c-flex-row c-aligni-center" v-for="(item, index) in uploadVideoList" :key="index">
                  <div @click="clickShowVideo(item.realUrl)" class="c-p c-ww320 c-hh180 c-fc-white c-flex-row c-flex-center">
                    <img class="c-w100 c-br10" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png" alt=""/>
                  </div>
                  <i @click="clickDelVideo(index)" class="iconfont c-fs28 fc-sxblack c-pl20">&#xe6ec;</i>
                </div>
              </div>
              <!-- 图/音频/视频上传 -->
              <div class="c-ww124 c-hh125 c-flex-row c-flex-center c-p c-mr20">
                <div class="c-w100 c-h c-flex-column c-flex-center c-bd1-e6 c-br8 c-text-hidden" :class="addComment.img && addComment.img.length < 9 ? 'c-fc-sblack' : 'c-fc-sgray'" @click="clickChoosePic">
                  <i class="iconfont c-fs32">&#xe691;</i>
                  <span class="c-fs20 c-lh28 c-mt12">添加照片</span>
                </div>
                <input class="c-pa c-opacity0 c-p-t0 c-p-l0 c-w100 c-h c-fs10" name="file" type="file" accept="image/*" v-if="addComment.img && addComment.img.length < 9 && !isWeiXin" @change="clickChoosePic" />
              </div>
              <div class="c-ww124 c-hh125 c-flex-row c-flex-center c-p c-mr20">
                <div class="c-w100 c-h c-flex-column c-flex-center c-bd1-e6 c-br8 c-text-hidden" :class="uploadAudioList.length > 0 ? 'c-fc-sgray' : 'c-fc-sblack'" @click="clickVoiceModal">
                  <i class="iconfont c-fs32">&#xe687;</i>
                  <span class="c-fs20 c-lh28 c-mt12">添加音频</span>
                </div>
              </div>
              <div class="c-ww124 c-hh125 c-flex-row c-flex-center c-p">
                <div class="c-w100 c-h c-flex-column c-flex-center c-bd1-e6 c-br8 c-text-hidden" :class="uploadVideoList.length > 0 ? 'c-fc-sgray' : 'c-fc-sblack'" @click="clickUploadVideo">
                  <i class="iconfont c-fs32">&#xe6cf;</i>
                  <span class="c-fs20 c-lh28 c-mt12">添加视频</span>
                </div>
                <input class="hide c-cursor-p needsclick" id="myUpload" type="file" accept="video/*" @change='onInputChange($event)' />
              </div>
            </div>
          </div>
          <div class="c-flex-row c-justify-end c-aligni-center c-pv20">
            <span class="c-fs24 c-fc-sgray">({{addComment.text.length}}/1024)</span>
            <div
              class="c-fs22 c-lh32 c-ph40 c-pv6 c-ml20 c-fc-white theme-bg c-mr24 c-br24"
              :class="addComment.text.length == 0 && addComment.img.length == 0 && uploadVideoList.length == 0 && uploadAudioList.length == 0 ? 'c-opacity50' : ''" @click="sendComment"
            >发送</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 视频加载进度 -->
    <my-loading :showLoading="showProgress" :text="uploadProgress"></my-loading>
    <!-- 音频 -->
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <!-- 音频录制、上传、重录 -->
    <open-modal :openModal="showAnswerModal" @closeModal="closeModal">
      <div class="c-w100 c-bg-white c-flex-column c-ph24 c-pz1000 c-hh288 c-br-tr40 c-br-tl40">
        <div class="c-pt60 c-flex-column c-flex-center">
          <div @click="clickStartRecord" v-show="recordStatus == 'RECORD_START'" class="c-ww132 c-hh132 c-brp50 bg-green c-flex-row c-flex-center c-opacity90">
            <span class="iconfont c-fs56 c-fc-white">&#xe639;</span>
          </div>
          <img @click="clickStopRecord" v-show="recordStatus == 'RECORDING'" class="c-ww132 c-hh132" src="../../../assets/i/wap/course/audio_record.gif" alt=""/>
          <div class="c-flex-row c-aligni-center c-justify-sb c-ww500" v-show="recordStatus == 'RECORD_END'">
            <div class="c-textAlign-c c-fs22" :class="isPlayTest ? 'theme-fc':'fc-lgreen'" @click="clickTryListen">
              <div class="iconfont c-fs40">&#xe993;</div>
              <div class="c-pt10">{{isWeiXin ? (isPlayTest ? '试听中':'试听') : ''}}</div>
            </div>
            <div @click="clickSentRecord" class="iconfont c-fc-white c-ww130 c-hh132 c-brp50 bg-green c-opacity90 c-flex-row c-flex-center c-fs80">&#xe824;</div>
            <div class="fc-lgreen c-fs22" @click="clickRecordAgain">
              <div class="iconfont c-fs40">&#xe994;</div>
              <div class="c-pt10">重录</div>
            </div>
          </div>
          <div v-show="recordStatus == 'RECORD_START'" class="c-fs20 c-fc-gray c-pt24">点击开始录音</div>
          <div v-show="recordStatus == 'RECORDING'" class="c-fs20 c-fc-gray c-pt24">录音中，还能录<span class="fc-lgreen">{{60-recordTime}}s</span></div>
          <div v-show="recordStatus == 'RECORD_END'" class="c-fs20 c-fc-gray c-pt24">
            <span>时长</span>
            <span><span class="fc-lgreen">{{recordTime}}</span>s</span>
          </div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import OpenModal from "@/components/templates/common/openModal.vue";
import myLoading from "@/plugin/loading/loading.vue";
import TcVod from "vod-js-sdk-v6";
import record from "@/utils/recorder.js";
let imgData = {};
let serverIdImgArr = [];
let uploader = null;
let recordTimeCon; //录音计时控制器
let currentLocalId = ""; //当前录制本地音频ID
let audioServerId = ""; //音频serverId
let curPlayLocalId = ""; //当前播放本地音频ID
// let progressTime;
export default {
  name: 'circleAddComment',
  components: {
    OpenModal,
    myLoading
  },
  props: {
    addComment: { // 评论信息
      type: Object
    },
    showAddComment: { // 展示添加评价
      type: Boolean,
      default: false,
    },
    replyInfo: { // 回复信息
      type: Object
    }
  },
  data() {
    return {
      isWeiXin: false,
      recordStatus: "RECORD_START", //录音状态
      playAduioSrc: "", //播放音频地址
      isPlayTest: false, //是否试听
      recordTime: 0,
      blob: '', //录音之后要上传七牛的音频文件
      uploadAudioList: [], //需要上传的音频
      qiniuInfo: {}, //录音完后的音频上传到七牛，这里是七牛的相关信息
      showAnswerModal: false, // 展示录音弹窗
      progress: 0, // 音频进度
      uploadVideoList: [], //需要上传的视频
      showProgress: false, // 展示进度加载
      uploadProgress: '0', // 上传视频进度
      videoMp4: '',
      currentVideoObj: {}, // 当前视频播放对象
      imageCount: 9,
    }
  },
  watch: {
    showAddComment: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.addComment = { // 添加评论
            text: '',
            img: [],
          }
          this.$nextTick(() => {
            this.$refs.contentArea.focus();
          })
        }
        this.initData();
      }
    }
  },
  created() {
    this.initData();
    this.isWeiXin = utilJs.isWeiXin();
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, (res) => {
        imgData = res;
      });
      utilJs.getMethod(
        global.apiurl + "common/qiniu/uploadToken",
        (res) => {
          this.qiniuInfo.qiNiuToken = res;
        }
      );
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.contentArea.focus();
    })
  },
  methods: {
    // 初始化
    initData() {
      this.recordStatus = "RECORD_START";
      this.playAduioSrc = "";
      this.isPlayTest = false;
      this.imageCount = 9,
      this.recordTime = 0;
      this.blob = '';
      this.uploadAudioList = [];
      this.showAnswerModal = false;
      this.progress = 0;
      this.uploadVideoList = [];
      this.showProgress = false;
      this.uploadProgress = '0';
      this.videoMp4 = '';
      this.currentVideoObj = {};
      serverIdImgArr = [];
      uploader = null;
      recordTimeCon = null;
      currentLocalId = "";
      audioServerId = "";
      curPlayLocalId = "";
    },
    // 发送评论
    sendComment() {
      if (this.addComment.text.length == 0 && this.addComment.img.length == 0 && this.uploadVideoList.length == 0 && this.uploadAudioList.length == 0) {
        this.$showCjToast({
          text: "请输入内容后发送",
          type: "warn",
        });
        return
      }
      if (this.uploadAudioList.length > 0) {
        this.addComment.audio = this.uploadAudioList[0].url;
        this.addComment.audio_time = this.uploadAudioList[0].time;
      }
      if (this.uploadVideoList.length > 0) {
        this.addComment.video = this.uploadVideoList[0].realUrl;
        this.addComment.fileId = this.uploadVideoList[0].url || '';
      }
      this.$emit('sendComment', this.addComment);
    },
    // 关闭添加评论
    closeAddComment() {
      this.showAddComment = false;
      this.$emit('closeAddComment');
    },
    // 点击图片放大预览
    clickPreviewImage(imgUrl, imgArr, imgIndex) {
      if (!imgUrl) {
        return;
      }
      let imgUrlList = [];
      imgArr = imgArr.filter(item => {
        return item != 'uploadQaImg'
      })
      for (let key of imgArr) {
        if (key) {
          imgUrlList.push(key);
        }
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgUrlList // 需要预览的图片http链接列表
      });
      // this.$previewImg({
      //   activeIndex: imgIndex,
      //   imgList: imgUrlList
      // })
    },
    //删除上传的图片
    delUploadImage(index) {
      this.addComment.img.splice(index, 1);
      this.imageCount = 9 - this.addComment.img.length;
    },
    // 上传图片
    clickChoosePic(event) {
      if (this.addComment.img && this.addComment.img.length == 9) {
        return
      }
      let that = this;
      if (that.isWeiXin) {
        wxUtilJs.chooseImage({
          count: that.imageCount, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
        }).then(localIds => {
          that.$loading.show({
            text: "上传中..."
          });
          serverIdImgArr = [];
          //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
          let residueLength = 9 - this.addComment.img.length;
          if (localIds.length > residueLength) {
            localIds.length = residueLength;
          }
          this.wxUploadImg(localIds, localIds.length - 1);
        })
      } else {
        utilJs.imgUpload(event.target.files, imgData, 'circle', res => {
          if (res.length > 0) {
            that.addComment.img.push(res);
          }
        }, fRes => { });
      }
    },
    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength) {
      wxUtilJs
        .uploadImage({ localId: localIds[localIdsLength] }, true)
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength);
          } else {
            this.syncUploadPic(serverIdImgArr);
          }
        });
    },
    //上传图片到服务器
    syncUploadPic(serverIdArr) {
      utilJs.postMethod(
        global.apiurl + "common/forms/wxUploadImg",
        {
          serverId: JSON.stringify(serverIdArr),
          mediaType: 2
        },
        res => {
          this.$loading.hide();
          if (res.length > 0) {
            this.addComment.img = [...this.addComment.img, ...res];
            this.imageCount = 9 - this.addComment.img.length;
          }
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    clickVoiceModal() {
      if (this.uploadAudioList[0] && this.uploadAudioList[0].url) return
      this.showAnswerModal = true;
    },
    // 删除音频
    clickDelAudio(index) {
      if (document.getElementById("audio")) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        document.getElementById("audio").pause();
      }
      this.uploadAudioList.splice(index, 1);
    },
    //点击开始播放音频
    clickPlayAudio(audioUrl) {
      let audio = document.getElementById("audio");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        this.progress = 0;
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;
      this.progress = 0;

      if (this.playAduioSrc.includes("http") || !this.playAduioSrc) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
        audio.removeEventListener("ended", this.playAudioEnd, false);
        audio.addEventListener("ended", this.playAudioEnd, false);
      } else {
        wxUtilJs.downloadVoice({ serverId: this.playAduioSrc }).then(res => {
          curPlayLocalId = res;
          wxUtilJs.playVoice({ localId: res });
        });
      }
      this.isPlayingAudio = true;
    },
    //点击重录
    clickRecordAgain() {
      this.recordStatus = "RECORD_START";
    },
    //音频上传成功
    uploadAudioSuccess(audioContent) {
      let audioItem = {
        url: audioContent.content,
        time: audioContent.time
      };
      this.uploadAudioList.push(audioItem);
    },
    //上传音频
    syncUploadAudio(serverId) {
      this.showAnswerModal = false;
      utilJs.postMethod(
        global.apiurl + "circle/downWxMediaSpx",
        {
          content: serverId
        },
        (res) => {
          this.$loading.hide();
          let audioContent = {
            content: res.audioUrl,
            time: this.recordTime
          };
          this.uploadAudioSuccess(audioContent);
        },
        (failRes) => {
          this.$loading.hide();
          this.showAnswerModal = false;
        }
      );
    },
    //监听音频播放结束执行的内容
    playAudioEnd() {
      //播放结束自动播放下一个非自己发的语音并且非已读语音
      this.playAduioSrc = "";
      this.progress = 0;
      document.getElementById("audio").src = this.playAduioSrc;
      this.isPlayingAudio = false;
    },
    //点击发送录音
    clickSentRecord() {
      this.recordStatus = "RECORD_START";
      this.showAnswerModal = false;
      if (this.isPlayTest) {
        wxUtilJs.stopVoice({ localId: currentLocalId });
        this.isPlayTest = false;
      }
      if (this.isWeiXin) {
        wxUtilJs.uploadVoice({ localId: currentLocalId }).then(serverId => {
          audioServerId = serverId;
          this.syncUploadAudio(audioServerId);
        });
      } else {
        record.uploadAudioFile(this.blob, this.qiniuInfo, sres => {
          audioServerId = sres;
          this.syncUploadAudio(audioServerId);
        }, () => { });
      }
    },
    // 点击停止录音
    clickStopRecord() {
      this.recordStatus = "RECORD_END";
      clearInterval(recordTimeCon);
      if (this.isWeiXin) {
        wxUtilJs.stopRecord().then(localId => {
          currentLocalId = localId;
        });
      } else {
        record.recStop(res => {
          this.blob = res;
        });
      }
      if (this.recordTime < 1) {
        this.$showCjToast({
          text: "录音时间太短",
          type: "warn",
        });
        this.recordStatus = "RECORD_START";
      }
    },
    // 点击开始录音
    clickStartRecord() {
      this.recordStatus = "RECORDING";
      // 点击开始录音
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
      this.stopListenAudio();
      this.recordTime = 0;
      if (this.isWeiXin) {
        wxUtilJs.startRecord().then(res => {
          recordTimeCon = setInterval(() => {
            if (this.recordTime < 60) {
              this.recordTime++;
            } else {
              clearInterval(recordTimeCon);
              this.recordStatus = "RECORD_END";
            }
          }, 1000)
        }, failRes => {
          this.$showCjToast({
            text: "开启录音失败,请确认是否授权录音",
            type: "warn",
          });
          this.recordStatus = "RECORD_START";
        })
        wxUtilJs.onVoiceRecordEnd().then(localId => {
          this.recordStatus = "RECORD_END";
          clearInterval(recordTimeCon);
          currentLocalId = localId;
        });
      } else {
        record.recOpen(() => {
          record.recStart();
          recordTimeCon = setInterval(() => {
            if (this.recordTime < 60) {
              this.recordTime++;
            } else {
              clearInterval(recordTimeCon);
              this.recordStatus = "RECORD_END";
            }
          }, 1000);
          record.recVoiceRecordEnd(res => {
            this.recordStatus = "RECORD_END";
            clearInterval(recordTimeCon);
            this.blob = res;
          });
        }, () => {
          this.recordStatus = "RECORD_START";
        });
      }
    },
    //停止试听
    stopListenAudio() {
      if (this.isPlayTest) {
        wxUtilJs.stopVoice({ localId: currentLocalId });
        this.isPlayTest = false;
      } else {
        wxUtilJs.stopVoice({ localId: curPlayLocalId });
      }
    },
    //点击试听
    clickTryListen() {
      if (!this.isWeiXin) {
        return;
      }
      this.isPlayTest = true;
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
      wxUtilJs.playVoice({ localId: currentLocalId });
    },
    // 点击添加音频
    closeModal() {
      if (this.recordStatus == "RECORDING") {
        return;
      }
      this.showAnswerModal = false;
    },
    // 点击添加视频
    clickUploadVideo() {
      if (this.uploadVideoList.length > 0) return
      document.getElementById("myUpload").click();
    },
    // 获取到文件得file
    onInputChange(e) {
      let inputFile = e.target.files[0];
      if (inputFile && inputFile.size > 1024 * 1024 * 1024) {
        this.$showCjToast({
          text: "视频文件大小不能超过1G",
          type: "warn",
        });
        document.getElementById("myUpload").value = null;
        return false;
      }
      if (inputFile) {
        this.uploadVideoToTencent(inputFile);
      }
    },
    uploadVideoToTencent(inputFile) {
      let _this = this;
      this.showProgress = true;
      const tcVod = new TcVod({
        // eslint-disable-line
        getSignature: utilJs.getVideoSign
      });
      uploader = tcVod.upload({
        mediaFile: inputFile // 媒体文件（视频或音频或图片），类型为 File
      });
      uploader.on("media_progress", function (info) {
        _this.uploadProgress = `上传进度:${Math.floor(info.percent * 100)}%`;
      });
      uploader
        .done()
        .then(result => {
          this.videoMp4 = result.video.url;
          this.showProgress = false;
          let videoInfo = {
            url: result.fileId,
            realUrl: result.video.url
          };
          this.uploadVideoList.push(videoInfo);
          let data = {
            videoId: result.fileId,
            videoMp4: result.video.url,
            videoName: inputFile.name
          };
          this.videoFirstSave(data);
          this.uploadProgress = '0';
          document.getElementById("myUpload").value = null;
        })
        .catch((err) => {
          this.showProgress = false;
          this.$showCjToast({
            text: "上传失败，请尝试重新上传",
            type: "warn",
          });
          this.uploadProgress = '0';
          document.getElementById("myUpload").value = null;
          let errorData = {
            errorMsg: JSON.stringify(err),
            errorType: "UPLOAD_VIDEO_ERROR"
          };
          utilJs.reprotError(errorData);
        })
    },
    // 保存视频
    videoFirstSave(data) {
      utilJs.postMethod(
        global.apiurl + "circle/videoFirstSave",
        data,
        (res) => { }
      );
    },
    // 删除视频
    clickDelVideo(index) {
      this.uploadVideoList.splice(index, 1);
    },
    //点击显示视频
    clickShowVideo(videoSrc, m3u8Url) {
      this.currentVideoObj = { videoSrc, m3u8Url }
      this.$emit('playAddCommentVideo', this.currentVideoObj);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../../../assets/css/scss/circle.scss";
.masker-content {
  background-color: #fff;
  width: 100%;
}
.del-img {
  position: absolute;
  right: -0.6rem;
  top: -0.6rem;
  transform: scale(0.5);
}
.audio_start {
  background: rgba(33, 148, 255, 0.1);
}
.circle_progress {
  position: relative;
  height: 0.1rem;
  margin: 0 0.5rem 0 0.8rem;
  border-radius: 0.1rem;
  background: #fff;
  .circle_progress_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    max-width: 100%;
    height: 0.1rem;
    border-radius: 0.1rem;
    text-align: right;
    background: #2194ff;
    .circle_round {
      display: inline-block;
      position: absolute;
      top: 50%;
      width: 0.5rem;
      height: 0.5rem;
      transform: translateY(-50%);
      border: 0.1rem solid #2194ff;
      border-radius: 50%;
      background: #fff;
    }
  }
}
.bg-green {
  background: #6ddd73;
}
.fc-lgreen {
  color: #6ddc73;
}
textarea {
  -webkit-user-select: auto;
  caret-color: var(--mb7color);
}
.modal {
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1002;
  width: 100%;
  max-width: 16rem;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
}
</style>
